<template>
  <div class="my-benefits">
    <div class="benefits-card" :class="`level-bg-${hoveredLevel || currentLevel}`">
      <!-- 返回按钮 -->
      <div class="back-button" @click="$router.back()">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </div>

      <!-- 顶部会员信息 -->
      <div class="member-info">
        <div class="member-avatar">
          <div class="avatar-wrapper">
            <img :src="userInfo.avatar" alt="用户头像" />
          </div>
          <span class="member-name">{{ userInfo.nickname }}</span>
        </div>
        <div class="member-level">
          <!-- 已消费金额 -->
          <div class="spent-amount">
            <span class="spent-label">已消费</span>
            <span class="spent-value">¥{{ userInfo.spending }}</span>
          </div>
          <span class="level-label">当前等级</span>
          <div class="level-tag-wrapper">
            <el-tag effect="dark" class="level-tag" :data-level="currentLevelName">
              <i class="el-icon-medal" style="margin-right: 5px;"></i>
              <span class="level-text">{{ currentLevelName }}</span>
            </el-tag>
          </div>
        </div>
      </div>

      <!-- 会员等级说明 -->
      <div class="level-description">
        <h3>会员等级说明</h3>
        <div class="level-progress">
          <div 
            v-for="(level, index) in allLevels" 
            :key="level.name"
            class="level-item"
            :class="{ 
              'active': index + 1 <= currentLevel,
              'hovered': index + 1 === hoveredLevel
            }"
            @mouseenter="handleLevelHover(index + 1)"
            @mouseleave="handleLevelLeave"
          >
            <div class="level-icon">
              <img :src="level.icon" :alt="level.name" />
            </div>
            <span class="level-name">{{ level.name }}</span>
            <span class="level-benefits">{{ level.mainBenefit }}</span>
          </div>
        </div>
      </div>

      <!-- 会员权益列表 -->
      <div class="benefits-list">
        <h3>会员权益</h3>
        <div 
          v-for="benefit in displayedBenefits" 
          :key="benefit.id"
          class="benefit-item"
        >
          <div class="benefit-icon">
            <img :src="benefit.icon" :alt="benefit.name" />
          </div>
          <div class="benefit-info">
            <h4>{{ benefit.name }}</h4>
            <p>{{ benefit.description }}</p>
          </div>
          <el-button 
            type="text"
            class="use-btn"
            :style="{ color: '#3F5D62' }"
          >
            立即使用
            <i class="el-icon-arrow-right"></i>
          </el-button>
        </div>
      </div>

      <!-- 温馨提示 -->
      <div class="service-notice">
        <div class="notice-content">
          <i class="el-icon-warning-outline"></i>
          <span>升级会员可享受更多权益，详情请咨询客服</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyBenefitsView",
  data() {
    return {
      currentLevel: 1, // 默认为普通会员
      currentLevelName: '普通会员',
      hoveredLevel: null,
      userInfo: {
        nickname: '张三',
        avatar: require('@/assets/avatar/avatar-10.png'),
        spending: 1800 // 当前消费金额
      },
      // 消费金额阈值
      spendingThresholds: [
        { name: '普通会员', amount: 0 },
        { name: '白银会员', amount: 200 },
        { name: '黄金会员', amount: 1000 },
        { name: '钻石会员', amount: 5000 }
      ],
      // 会员等级映射
      levelMap: {
        '普通会员': 1,
        '白银会员': 2,
        '黄金会员': 3,
        '钻石会员': 4
      },
      // 等级值到名称的映射
      levelNames: ['普通会员', '白银会员', '黄金会员', '钻石会员'],
      allLevels: [
        {
          name: '普通会员',
          icon: require('@/assets/benefits/normal-icon.png'),
          mainBenefit: '默认会员等级'
        },
        {
          name: '白银会员',
          icon: require('@/assets/benefits/silver-icon.png'),
          mainBenefit: '消费满￥200'
        }, 
        {
          name: '黄金会员',
          icon: require('@/assets/benefits/gold-icon.png'),
          mainBenefit: '消费满￥1000'
        },
        {
          name: '钻石会员',
          icon: require('@/assets/benefits/diamond-icon.png'),
          mainBenefit: '消费满￥5000'
        }
      ],
      benefitsByLevel: {
        1: [
          {
            id: 1,
            name: "1次AI咨询",
            description: "每月可使用1次AI咨询服务",
            icon: require("@/assets/benefits/tag.png"),
          },
          {
            id: 2,
            name: "新人礼包",
            description: "注册即可领取新人专属礼包",
            icon: require("@/assets/benefits/tag.png"),
          }
        ],
        2: [
          {
            id: 3,
            name: "2次AI咨询",
            description: "每月可使用2次AI咨询服务",
            icon: require("@/assets/benefits/tag.png"),
          },
          {
            id: 4,
            name: "9折优惠",
            description: "全场商品9折优惠",
            icon: require("@/assets/benefits/tag.png"),
          },
          {
            id: 5,
            name: "专属客服",
            description: "享受专属客服服务",
            icon: require("@/assets/benefits/tag.png"),
          }
        ],
        3: [
          {
            id: 6,
            name: "5次AI咨询",
            description: "每月可使用5次AI咨询服务",
            icon: require("@/assets/benefits/tag.png"),
          },
          {
            id: 7,
            name: "8.5折优惠",
            description: "全场商品8.5折优惠",
            icon: require("@/assets/benefits/tag.png"),
          },
          {
            id: 8,
            name: "专属Lucky",
            description: "解锁专属黑科技",
            icon: require("@/assets/benefits/tag.png"),
          }
        ],
        4: [
          {
            id: 9,
            name: "无限AI咨询",
            description: "每月可无限使用AI咨询服务",
            icon: require("@/assets/benefits/tag.png"),
          },
          {
            id: 10,
            name: "8折优惠",
            description: "全场商品8折优惠",
            icon: require("@/assets/benefits/tag.png"),
          },
          {
            id: 11,
            name: "专属Lucky",
            description: "解锁专属黑科技",
            icon: require("@/assets/benefits/tag.png"),
          },
          {
            id: 12,
            name: "VIP专享",
            description: "尊享VIP专属权益",
            icon: require("@/assets/benefits/tag.png"),
          }
        ]
      },
      currentLevelBenefits: []
    };
  },
  computed: {
    displayedBenefits() {
      return this.hoveredLevel ? this.benefitsByLevel[this.hoveredLevel] : this.currentLevelBenefits;
    },
    // 计算进度条百分比
    progressPercentage() {
      const maxAmount = this.spendingThresholds[this.spendingThresholds.length - 1].amount;
      const percentage = (this.userInfo.spending / maxAmount) * 100;
      return Math.min(percentage, 100); // 确保不超过100%
    },
    // 计算下一个等级信息
    nextLevelInfo() {
      // 找到下一个等级阈值
      const nextThreshold = this.spendingThresholds.find(threshold => 
        threshold.amount > this.userInfo.spending
      );
      
      if (nextThreshold) {
        return {
          name: nextThreshold.name,
          remaining: nextThreshold.amount - this.userInfo.spending
        };
      }
      
      return null; // 已经是最高等级
    }
  },
  methods: {
    handleLevelHover(level) {
      this.hoveredLevel = level;
    },
    handleLevelLeave() {
      this.hoveredLevel = null;
    },
    updateCurrentLevelBenefits() {
      this.currentLevelBenefits = this.benefitsByLevel[this.currentLevel] || [];
    },
    // 根据消费金额更新会员等级
    updateLevelBySpending() {
      let newLevel = 1;
      
      for (let i = this.spendingThresholds.length - 1; i >= 0; i--) {
        if (this.userInfo.spending >= this.spendingThresholds[i].amount) {
          newLevel = i + 1;
          break;
        }
      }
      
      this.currentLevel = newLevel;
      this.currentLevelName = this.levelNames[newLevel - 1];
    },
  },
  created() {
    // 从路由获取会员等级信息
    const { level, levelName, spending } = this.$route.query;
    
    // 如果有消费金额参数，更新消费金额
    if (spending) {
      this.userInfo.spending = parseInt(spending);
    }
    
    if (level) {
      // 如果有level参数，直接使用
      this.currentLevel = parseInt(level) || 1;
      // 根据等级值设置等级名称
      this.currentLevelName = this.levelNames[this.currentLevel - 1] || '普通会员';
    } else if (levelName) {
      // 如果有levelName参数，根据名称获取等级值
      this.currentLevelName = levelName;
      this.currentLevel = this.levelMap[levelName] || 1;
    } else {
      // 如果没有等级参数，根据消费金额计算等级
      this.updateLevelBySpending();
    }
    
    // 确保currentLevel在有效范围内
    if (this.currentLevel < 1 || this.currentLevel > 4) {
      this.currentLevel = 1;
      this.currentLevelName = '普通会员';
    }
    
    this.updateCurrentLevelBenefits();
  }
};
</script>

<style scoped>
.my-benefits {
  min-height: 50vh;
  padding: 40px 20px;
  background: #f8f9fa;
  display: flex;
  justify-content: center;
}

.benefits-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 30px;
  width: 100%;
  max-width: 1060px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: relative;
  transition: all 0.5s ease;
}

/* 不同等级的背景样式 */
.level-bg-1 {
  background: linear-gradient(to bottom right, #fff, #3c743c2d);
}

.level-bg-2 {
  background: linear-gradient(to bottom right, #fff, #f5f5f5);
}

.level-bg-3 {
  background: linear-gradient(to bottom right, #fff, #fffbeb);
}

.level-bg-4 {
  background: linear-gradient(to bottom right, #fff, #edf8ff);
}

.back-button {
  position: absolute;
  left: 30px;
  top: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #3f5d62;
  cursor: pointer;
  font-size: 1rem;
}

.member-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  margin-top: 50px;
}

.member-avatar {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 2px solid #fff;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-name {
  font-size: 1.2rem;
  color: #333;
  font-weight: bold;
}

.member-level {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #f8f9fa;
  padding: 10px 20px;
  border-radius: 12px;
}

/* 已消费金额样式 */
.spent-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.spent-amount::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -15px;
  width: 1px;
  height: 16px;
  background: #ddd;
  transform: translateY(-50%);
}

.spent-label {
  color: #666;
  font-size: 0.85rem;
}

.spent-value {
  color: #e6a23c;
  font-weight: bold;
  font-size: 1rem;
}

.level-label {
  color: #666;
  font-size: 0.95rem;
  font-weight: 500;
}

.level-tag-wrapper {
  position: relative;
}

.level-tag-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  width: 1px;
  height: 16px;
  background: #ddd;
  transform: translateY(-50%);
}

.level-tag {
  border: none;
  background: linear-gradient(45deg, #3F5D62, #537A80);
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(63, 93, 98, 0.2);
  transition: all 0.3s ease;
  height: 45px;
}

.level-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(63, 93, 98, 0.3);
}

.level-text {
  font-size: 0.95rem;
  font-weight: 500;
}

/* 针对不同等级显示不同的渐变色 */
.level-tag[data-level="普通会员"] {
  background: linear-gradient(45deg, #3F5D62, #537A80);
}

.level-tag[data-level="白银会员"] {
  background: linear-gradient(45deg, #95A5A6, #BDC3C7);
}

.level-tag[data-level="黄金会员"] {
  background: linear-gradient(45deg, #F1C40F, #F39C12);
}

.level-tag[data-level="钻石会员"] {
  background: linear-gradient(45deg, #3498DB, #2980B9);
}

.level-description {
  margin-bottom: 40px;
}

.level-progress {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 20px 0;
}

.level-progress::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #eee;
  z-index: 1;
}

.level-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  flex: 1;
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.3s ease;
}

.level-item.active {
  opacity: 1;
}

.level-item.hovered {
  opacity: 1;
  transform: scale(1.1);
}

.level-icon {
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border: 2px solid #eee;
  transition: all 0.3s ease;
}

.level-item.active .level-icon {
  border-color: #3F5D62;
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(63, 93, 98, 0.2);
}

.level-item.hovered .level-icon {
  border-color: #3F5D62;
  transform: scale(1.2);
  box-shadow: 0 0 15px rgba(63, 93, 98, 0.3);
}

.level-icon img {
  width: 24px;
  height: 24px;
}

.level-name {
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 5px;
}

.level-benefits {
  font-size: 0.8rem;
  color: #666;
  text-align: center;
}

.benefits-list {
  margin-bottom: 40px;
  transition: all 0.3s ease;
}

.benefits-list h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 1.2rem;
}

.benefit-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.benefit-item:last-child {
  border-bottom: none;
}

.benefit-icon {
  width: 40px;
  height: 40px;
  margin-right: 20px;
}

.benefit-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.benefit-info {
  flex: 1;
}

.benefit-info h4 {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 1.1rem;
}

.benefit-info p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

.use-btn {
  color: #3F5D62;
  font-size: 0.9rem;
}

.use-btn i {
  margin-left: 5px;
}

.service-notice {
  padding: 20px 25px;
  background: linear-gradient(to right, #fff9e6, #fff5d6);
  border-radius: 12px;
  border: 1px solid rgba(230, 162, 60, 0.15);
  margin-top: 20px;
}

.notice-content {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #666;
  font-size: 0.95rem;
}

.notice-content i {
  color: #e6a23c;
  font-size: 1.4rem;
}

@media (max-width: 768px) {
  .member-info {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .level-progress {
    flex-direction: column;
    gap: 30px;
  }

  .level-progress::before {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
  }

  .level-item {
    flex-direction: row;
    gap: 15px;
  }

  .level-benefits {
    text-align: left;
  }
  
  .level-tag {
    padding: 6px 12px;
  }
  
  .level-tag-wrapper::before {
    display: none;
  }

  .member-level {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .spent-amount::after {
    display: none;
  }
}

/* 消费金额进度条样式 */
.spending-progress {
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  max-width: 700px; /* 限制进度条宽度 */
  margin-left: auto;
  margin-right: auto;
}

.current-spending {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  color: #666;
}

.current-spending .amount {
  font-weight: bold;
  color: #3F5D62;
  font-size: 1.1rem;
}

.progress-container {
  position: relative;
  margin-bottom: 20px;
  height: 40px; /* 增加高度以容纳标记点标签 */
}

.progress-bar {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, #3F5D62, #537A80);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.level-markers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  width: 100%;
}

.marker {
  position: absolute;
  transform: translateX(-50%);
}

.marker-dot {
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: absolute;
  top: -4px;
  left: 0;
  z-index: 2;
  transition: all 0.3s ease;
}

.marker.reached .marker-dot {
  background: #3F5D62;
  border-color: #3F5D62;
  box-shadow: 0 0 0 2px rgba(63, 93, 98, 0.2);
}

.marker-label {
  position: absolute;
  top: 20px;
  left: 0;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.marker-amount {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 2px;
}

.marker-name {
  font-size: 0.75rem;
  color: #999;
}

.marker.reached .marker-amount,
.marker.reached .marker-name {
  color: #3F5D62;
  font-weight: 500;
}

.next-level {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  color: #666;
  font-size: 0.9rem;
}

.next-level .amount {
  font-weight: bold;
  color: #e6a23c;
}
</style> 